<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <el-upload
          ref="upload"
          action="/lejuAdmin/material/uploadFileOssSave"
          :on-success="materialUploadSucc"
          multiple
          :limit="2"
          :on-exceed="exceedChange"
          :headers="token"
        >
          <el-button slot="trigger" size="small" type="primary">上传素材</el-button>

          <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 1.5M</div>
        </el-upload>

      </div>
      <el-row>

        <el-card v-for="item in materialList" :key="item.id" shadow="never" style="width:18%;display:inline-block;margin:10px;">
          <div slot="header">
            <span>创建时间：{{ item.createTime }}</span>
          </div>
          <!-- ['http://xxx.png','http://xxxxxyiyy.png'] -->
          <el-image style="width:285px;height:250px;" :src="item.ossUrl" :preview-src-list="previewList" />
          <el-button type="danger" size="mini">删除</el-button>

        </el-card>

      </el-row>

    </el-card>

  </div>
</template>
<script>
import {
  findMaterialByPage as findMaterialByPageApi
} from '@/api/content/material'
import mix from '@/mixins/index'
export default {
  name: 'Materail',
  mixins: [mix],
  data() {
    return {
      materialList: [],
      previewList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getMaterialList()
  },
  mounted() {
  },
  methods: {
    exceedChange() {
      console.log('超出2张')
    },
    materialUploadSucc(res) {
      console.log(res)
    },
    doUploadMaterial() {

    },
    async getMaterialList() {
      const res = await findMaterialByPageApi(this.paginationObj.start, this.paginationObj.limit)
      const { success, data, message } = res
      if (success) {
        this.materialList = data.rows
        this.previewList = data.rows.map(item => item.ossUrl)
        this.paginationObj.total = data.total
      } else {
        this.$message.error(message)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
